<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>淘彩</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/nav.js"></script>
    <script src="js/rem.js"></script>

    <link href="css/mui.css" rel="stylesheet" />
    <link href="css/fonts.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <link href="css/user.css" rel="stylesheet" />
</head>

<body>
    <div id="app" v-cloak>
        <header class="mui-bar mui-bar-nav header">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h2 class="mui-title">身份证</h2>
        </header>
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="background: #f2f2f2;">
            <div class="mui-scroll">
                <div class="userInfo">
                    <div class="bindCardImg">
                        <img src="images/bind_card.png">
                        <p>身份证已绑定</p>
                    </div>
                    <div class="userIndexList">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell">
                                <a>
                                    <span>姓名</span>
                                    <div class="fl_right">*{{name.substr(name.length - 2, 2)}}</div>
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a>
                                    <span>身份证</span>
                                    <div class="fl_right">{{card.substr(0, 4)}}********{{card.substr(card.length - 4, 4)}}
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    $(document).ready(function () {

        new Vue({
            el: '#app',
            data: {
                card: '',
                name: ''
            },
            mounted: function () {
                this.getBindInfo()
            },
            methods: {
                /**
                 *  获取绑定信息
                 */
                getBindInfo: function () {
                    let that = this,
                        temp = window.location.search.split('&'),
                        card = temp[1].replace('card=', ""),
                        name = decodeURIComponent(temp[0].replace('?name=', ""))

                    that.name = name
                    that.card = card
                }
            }
        })
        $('.nav-list a').eq(4).addClass('mui-active')
        mui('body').on('tap', 'a', function () {
            document.location.href = this.href
        })


    })
</script>

</html>